<template>
    <el-form :model="queryParams" ref="queryRef" :inline="true" label-width="88px" v-if="props.fieldList && props.fieldList.length > 0">      
      <el-form-item label="搜索字段" prop="field">
        <el-select v-model="queryParams.field" placeholder="请选择" clearable style="width:160px">
          <el-option
            v-for="(f,i) in props.fieldList"
            :key="i"
            :label="f.name"
            :value="f.code"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="匹配模式" prop="exp">
        <el-select v-model="queryParams.exp" placeholder="请选择匹配模式" clearable style="width:160px">
          <el-option
            v-for="dict in dev_sql_exp"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="搜索值" prop="val">
        <el-input
          v-model="queryParams.val"
          placeholder="请输入值"
          clearable
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
</template>

<script setup name="SearchForm">
const { proxy } = getCurrentInstance();
const { dev_sql_exp } = proxy.useDict('dev_sql_exp');
const emit = defineEmits(['query'])

const queryParams = ref({field: null,    exp: null,    val: null});


const props = defineProps({
  fieldList: {
    type: Array
  }
});


/** 搜索按钮操作 */
function handleQuery() {  
   emit('query', queryParams.value);
}

/** 重置按钮操作 */
function resetQuery() {
  proxy.resetForm("queryRef");
  emit('query');
}

</script>
